<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/three/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
  <script>
    // 初始化场景、相机、渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建视频播放器
    const video = document.createElement('video');
    video.muted = true;
    const flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:9000/examples/resources/video/bbb.flv' });
    flvPlayer.attachMediaElement(video);
    flvPlayer.load();
    flvPlayer.play();

    // 创建材质并绑定到几何体
    const videoTexture = new THREE.VideoTexture(video);
    const material = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide });
    const geometry = new THREE.PlaneGeometry(16, 9);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    camera.position.z = 10;

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        videoTexture.needsUpdate = true;
      }
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>